<template>
	<a-tabs
		v-model:activeKey="activeKey"
		class="app-drtab"
		@change="handleChange"
	>
		<a-tab-pane v-if="viewType == 'DEEDITVIEW3'" :key="codeName">
			<template #tab>
				<AppIconText
					:imgPath="imgPath"
					:iconClass="iconClass"
					:text="$t(`${capPSLanguageRes}`, caption)"
				></AppIconText>
			</template>
		</a-tab-pane>
		<a-tab-pane
			v-for="item in pages"
			:key="item.name"
			:disabled="item.disabled"
		>
			<template #tab>
				<AppIconText
					:imgPath="item.imgPath"
					:iconClass="item.iconClass"
					:text="$t(`${item.capPSLanguageRes}`, item.caption)"
					v-badge="counterData?.[item.counterId]"
				></AppIconText> </template
		></a-tab-pane>
	</a-tabs>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import { drtabProps } from './drtab';
const props = defineProps(drtabProps);
const activeKey = computed(() => {
	if (props.selectItem) {
		return props.selectItem.name;
	} else {
		return props.codeName;
	}
});
const emit = defineEmits<{
	(name: 'itemClick', item: IParam): void;
}>();
const handleChange = (key: string | number) => {
	const item = props.pages.find((item: IParam) => Object.is(item.name, key));
	if (item) {
		emit('itemClick', item);
	} else {
		emit('itemClick', { name: props.codeName, appViewName: '' });
	}
};
</script>
